// 定义懒加载插件
// 定义全局指令
import { useIntersectionObserver } from '@vueuse/core'

export const lazyPlugin = {
    install (app) {
        app.directive('img-lazy', {
            mounted(el, binding) {
                // el: 指绑定的哪个元素
                // binding：监测指令后面的值时什么
                // console.log(el, binding.value);
        const {stop} =  useIntersectionObserver(
                    el,
                    ([{ isIntersecting }]) => {
                        // isIntersecting 布尔值，当图片进入到视口区域，会变true
                    //   console.log(isIntersecting);
                      if(isIntersecting) {
                        el.src = binding.value
                        stop() // 第一次图片加载完成之后，停止监听图片是否进入视口
                      }
                    },
                  )
            }
        })
    }
}